<template>
	<view class="container">
		<view class="tabbar-container">
			<tnTabbar :currentIndex="currentIndex"></tnTabbar>
		</view>
		<view style="height: 50px; width: 90%; margin-left: 5%; margin-top: 5%;   
			border-radius:15px ;background-color:#00afaf;
			border: 1px dotted #007373;display: flex;
			align-items:center;
			justify-content:space-between
			">
			<view @click="login" style="border-radius:25px;width: 100%;display: flex;align-items:center;">
				<tn-avatar :src="user.avatarUrl" size="lg" style="margin-left: 3%;" />
				<text style="margin-left: 3%;">{{ user.username != undefined ? user.username : "还未登录" }}</text>
			</view>
			<view style="margin-right: 5%;">
				<tn-button shape="icon" class="tn-icon-install" :fontSize="60" backgroundColor="#00afaf"
					 @click="setUp"></tn-button>
					<br>
				<text>设置</text>
			</view>
		</view>
		<view class="grid-container grid-top">
			<tn-grid align="center" :col="4">
				<tn-grid-item class="gridItem" :index="1" @click="dian">
					<view>我的收藏</view>
				</tn-grid-item>
				<tn-grid-item class="gridItem" :index="2" @click="dian">
					<view>历史浏览</view>
				</tn-grid-item>
				<tn-grid-item class="gridItem" :index="3" @click="dian">
					<view>我的关注</view>
				</tn-grid-item>
				<!-- <tn-grid-item class="gridItem" :index="4" @click="dian">
					<view>卡包</view>
				</tn-grid-item> -->
			</tn-grid>
		</view>
		<view class="grid-container grid-bottom">
			<view class="trade-title">我的交易</view>
			<tn-grid align="center" :col="4">
				<tn-grid-item class="gridItem2" @tap="goToMyPublish">
					<text class="tn-icon-shop"></text>
					<view>我发布的</view>
				</tn-grid-item>
				<tn-grid-item class="gridItem2" @tap="goToSoldGoodsStatistics">
					<text class="tn-icon-money"></text>
					<view>我卖出的</view>
				</tn-grid-item>
				<tn-grid-item class="gridItem2" @tap="getToPurchasedGoods">
					<text class="tn-icon-buy"></text>
					<view>我买到的</view>
				</tn-grid-item>
			</tn-grid>
		</view>
		<view class="bottom-space"></view>
	</view>
</template>

<script>
	import tTabbar from "@/components/tnTabbar/tnTabbar.vue"

	export default {
		name: "information",
		components: {
			tTabbar
		},
		data() {
			return {
				currentIndex: 4,
				user: {
					userid: undefined,
					username: undefined,
					avatarUrl: undefined
				},
			}
		},
		mounted() {
			this.getUser()
		},
		methods: {
			getToPurchasedGoods(){
				uni.navigateTo({
					url: "/pages/Information/subpage/purchasedGoods"
				})
			},
			goToSoldGoodsStatistics(){
				uni.navigateTo({
					url: "/pages/Information/subpage/soldGoodsStatistics"
				})
			},
			getUser() {
				let userInfo = uni.getStorageSync("userInfo");
				if (userInfo.nickName !== undefined) {
					this.user.userid = userInfo.id
					this.user.username = userInfo.nickName
					this.user.avatarUrl = userInfo.avatarUrl
				}

			},
			login() {
				let userInfo = uni.getStorageSync("userInfo");
				if (userInfo.id === undefined || userInfo.id == 0) {
					uni.navigateTo({
						url: "/pages/Information/login/login"
					})
				} else {
					console.log("已经登录了");
					uni.navigateTo({
						url: "/pages/Information/homePage/homePage"
					})
				}
			},
			setUp() {
				uni.navigateTo({
					url: "/pages/setUp/setUp"
				})
			},
			dian(index) {
				const urlMap = {
					1: '/pages/Information/subpage/collect',
					2: '/pages/Information/subpage/historyRecord',
					3: '/pages/Information/subpage/followPage',
					4: '/pages/Information/subpage/cardPackage'
				};
				if (!urlMap[index]) return;
				uni.navigateTo({
					url: urlMap[index]
				});
			},
			goToMyPublish() {
				const userInfo = uni.getStorageSync('userInfo');
				if (!userInfo || !userInfo.id || userInfo.id === 'undefined') {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/Information/login/login'
						});
					}, 1500);
					return;
				}

				uni.navigateTo({
					url: '/pages/Information/subpage/myPublish',
					fail: (err) => {
						console.error('跳转失败:', err);
						uni.showToast({
							title: '跳转失败',
							icon: 'none'
						});
					}
				});
			}
		}
	}
</script>

<style>
	.container {
		background-color: #00afaf;
	}

	.tabbar-container {
		margin-top: 0;
	}

	.grid-container {
		width: 92%;
		margin-left: 4%;
		background-color: #00afaf;
		border: 1px dotted #007373;
		padding: 5px;
	}

	.grid-top {
		height: 50px;
		margin-top: 7.5%;
		border-radius: 15px 15px 0 0;
		overflow: hidden;
		border-bottom: none;
	}

	.grid-bottom {
		height: 85px;
		border-radius: 0 0 15px 15px;
		overflow: hidden;
		border-top: none;
		margin-top: -1px;
	}

	.trade-title {
		width: 80%;
		margin-left: 5%;
		margin-top: 1.5%;
		margin-bottom: 1.5%;
		font-size: 14px;
		height: 20px;
	}

	.gridItem {
		cursor: pointer;
		height: 48px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #ffffff;
		flex: 1;
		border-right: 1px dotted #007373;
	}

	.gridItem view {
		font-size: 14px;
		text-align: center;
	}

	.gridItem:last-child {
		border-top-right-radius: 13px;
		border-right: none;
	}
	.gridItem:first-child {
		border-top-left-radius: 13px;
	}

	.gridItem2 {
		cursor: pointer;
		height: 44px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #ffffff;
		flex: 1;
		margin-top: 2px;
		margin-bottom: 5px;
		border-right: 1px dotted #007373;
	}

	.gridItem2 text {
		font-size: 15px;
		margin-bottom: 2px;
	}

	.gridItem2 view {
		font-size: 12px;
	}

	.gridItem2:last-child {
		border-bottom-right-radius: 10px;
		border-right: none;
	}
	.gridItem2:first-child{
		border-bottom-left-radius: 10px;
		border-left: none;
	}

	.bottom-space {
		height: 800px;
	}
</style>